<template>
  <div class="anTimeRank">

    <!-- 面包屑 -->
    <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/Admin' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>cloud_music 后台管理系统</el-breadcrumb-item>
        <el-breadcrumb-item>数据展示</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="Gcontainer">
      <div id="one"></div>
      <div id="two"></div>
      <div id="three"></div>
      <div id="four"></div>
    </div>


  </div>
</template>

<script>
import * as echarts from 'echarts';
import { count_song_favoriteAPI, count_song_commentsAPI, count_song_playAPI } from '@/api/admin';
export default {
  data() {
    return {
      // 收藏数据=============================
      favorite_bar_chartDome: null,
      favorite_bar_myChart: null,
      favorite_bar_option: null,

      favorite_pie_chartDome: null,
      favorite_pie_myChart: null,
      favorite_pie_option: null,

      favorite_xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },

      favorite_bar_data: [],
      favorite_pie_data: [],

      // 评论数据==============================
      comment_bar_chartDome: null,
      comment_bar_myChart: null,
      comment_bar_option: null,

      comment_xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },

      comment_bar_data: [],

      // 播放数据==============================
      play_bar_chartDome: null,
      play_bar_myChart: null,
      play_bar_option: null,

      play_xAxis: {
        type: 'category',
        data: [],
        axisLabel: {
          interval: 0,//代表显示所有x轴标签显示
          rotate: 45, //代表逆时针旋转45度
        },
      },

      play_bar_data: []
    }
  },
  mounted() {
    this.load_process_data()
  },
  methods: {
    async load_process_data() {
      // 加载数据
      const { data: favorite_res } = await count_song_favoriteAPI()
      const { data: comment_res } = await count_song_commentsAPI()
      const { data: play_res } = await count_song_playAPI()

      // 处理数据

      // 收藏数据 （柱状图和饼图）
      const favorite_res_keys = Object.keys(favorite_res)
      favorite_res_keys.forEach(item => {
        this.favorite_bar_data.push(favorite_res[item])
        let temp_pie_item = { "value": favorite_res[item], "name": item }
        this.favorite_pie_data.push(temp_pie_item)
        // x轴数据
        this.favorite_xAxis.data.push(item)
      })

      // 评论数据  （柱状图）
      const comment_res_keys = Object.keys(comment_res)
      comment_res_keys.forEach(item => {
        this.comment_bar_data.push(comment_res[item])
        // x轴数据
        this.comment_xAxis.data.push(item)
      })

      // 播放数据
      const play_res_keys = Object.keys(play_res)
      play_res_keys.forEach(item => {
        this.play_bar_data.push(play_res[item])
        // x轴数据
        this.play_xAxis.data.push(item)
      })

      // console.log(this.favorite_bar_data)
      // console.log(this.favorite_pie_data)
      // console.log(this.comment_bar_data)
      // console.log(this.play_bar_data)

      // 处理完数据再绘图
      this.draw_favorite_bar()
      this.draw_favorite_pie()
      this.draw_comment_bar()
      this.draw_play_bar()
      // console.log("画完了")
      // this.draw_week_pie()
      // this.draw_hour_pie()

    }
    ,

    // favorite柱状图 one
    draw_favorite_bar() {
      this.favorite_bar_chartDome = document.getElementById('one');
      this.favorite_bar_myChart = echarts.init(this.favorite_bar_chartDome);

      this.favorite_bar_option = {
        title: {
          show: true,
          text: "歌曲收藏数据分布",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.favorite_xAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.favorite_bar_data,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            label: {
              show: true, //开启显示
              position: 'inside', //在上方显示
              textStyle: { //数值样式
                color: 'oldlace',//字体颜色
                fontSize: 10//字体大小
              }
            }
          }
        ]
      };

      // console.log(this.favorite_bar_option)
      // console.log(this.favorite_bar_myChart)
      this.favorite_bar_option && this.favorite_bar_myChart.setOption(this.favorite_bar_option);
    },

    // favorite饼图 two
    draw_favorite_pie() {
      this.favorite_pie_chartDome = document.getElementById('two');
      this.favorite_pie_myChart = echarts.init(this.favorite_pie_chartDome);

      this.favorite_pie_option = {
        title: {
          text: '歌曲收藏数据分布',
          // subtext: 'Fake Data',
          left: 'center'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            saveAsImage: { show: true, }
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.favorite_pie_data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      this.favorite_pie_option && this.favorite_pie_myChart.setOption(this.favorite_pie_option);
    },

    // comment柱状图 three
    draw_comment_bar() {
      this.comment_bar_chartDome = document.getElementById('three');
      this.comment_bar_myChart = echarts.init(this.comment_bar_chartDome);

      this.comment_bar_option = {
        title: {
          show: true,
          text: "歌曲评论数据分布",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.comment_xAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.comment_bar_data,
            type: 'line',
            areaStyle: {},
            smooth: true,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            label: {
              show: true, //开启显示
              position: 'inside', //在上方显示
              textStyle: { //数值样式
                color: 'black',//字体颜色
                fontSize: 10//字体大小
              }
            }
          }
        ]
      };

      this.comment_bar_option && this.comment_bar_myChart.setOption(this.comment_bar_option);
    },

    // play柱状图 four
    draw_play_bar() {
      this.play_bar_chartDome = document.getElementById('four');
      this.play_bar_myChart = echarts.init(this.play_bar_chartDome);

      this.play_bar_option = {
        title: {
          show: true,
          text: "歌曲播放数据分布",
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: { show: true, },
            dataView: { show: true, },
            magicType: { show: true, },
            restore: { show: true, },
            magicType: { type: ['line', 'bar'] },
            saveAsImage: { show: true, }
          }
        },
        xAxis: this.play_xAxis,
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.play_bar_data,
            type: 'line',
            areaStyle: {},
            smooth: true,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            },
            label: {
              show: true, //开启显示
              position: 'inside', //在上方显示
              textStyle: { //数值样式
                color: 'black',//字体颜色
                fontSize: 10//字体大小
              }
            }
          }
        ]
      };

      this.play_bar_option && this.play_bar_myChart.setOption(this.play_bar_option);
    },
  }
}
</script>

<style scoped>
.anTimeRank {
  width: 100%;
  height: 100%;
  overflow: scroll;
  padding: 5px;
}

/* 去除滚动栏，保留滚动效果 */
.anTimeRank::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.Gcontainer {
  margin-top: 5px;
  width: 100%;
  height: 98%;
  /* background-color: azure; */
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 5px;
  /* overflow: hidden; */
}

/* 去除滚动栏，保留滚动效果 */
.Gcontainer::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

#one {
  width: 49%;
  height: 49%;
  /* flex: 1 1 48%; 设置子元素占满一行，每行两个子元素    */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#two {
  width: 49%;
  height: 49%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素     */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#three {
  width: 49%;
  height: 49%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素   */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}

#four {
  width: 49%;
  height: 49%;
  /* flex: 1 1 46%; 设置子元素占满一行，每行两个子元素   */
  border-radius: 9px;
  border: 0.5px solid rgba(128, 128, 128, 0.01);
  box-shadow: 0px 0px 8px rgba(51, 55, 68, 0.5);
  /* margin: 8px; */
  box-sizing: border-box;
  overflow: hidden;
}
</style>
</style>